HTML HSL颜色 和 HSLA颜色 |
您所在的位置:网站首页 › 色调 饱和度 值 › HTML HSL颜色 和 HSLA颜色 |
❮ 上一节
下一节 ❯
HTML HSL 和 HSLA 颜色
HSL 代表色调、饱和度和亮度。 HSLA 颜色值是 HSL 的扩展,带有 Alpha 通道(透明度)。 HSL 颜色值在 HTML 中,可以使用色调、饱和度和亮度(HSL)指定颜色,格式如下: hsl(hue, saturation, lightness) 色调是色轮上从0到360的度数。0是红色,120是绿色,240是蓝色。 饱和度是一个百分比值,0%表示灰色阴影,100%表示全色。 亮度也是一个百分比值,0%为黑色,100%为白色。 混合以下 HSL 值进行试验:
HUE 0SATURATION 100%LIGHTNESS 50% 实例 hsl(0, 100%, 50%) hsl(240, 100%, 50%) hsl(147, 50%, 47%) hsl(300, 76%, 72%) hsl(39, 100%, 50%) hsl(248, 53%, 58%) 亲自试一试 » 饱和度饱和度可以描述为颜色的强度。 100%纯色,没有灰色 50%是50%的灰色,但你仍然可以看到颜色。 0%是完全灰色的,你再也看不到颜色了。 实例 hsl(0, 100%, 50%) hsl(0, 80%, 50%) hsl(0, 60%, 50%) hsl(0, 40%, 50%) hsl(0, 20%, 50%) hsl(0, 0%, 50%) 亲自试一试 » 亮度一种颜色的亮度可以描述为你想要给颜色多少光,其中0%表示不亮(黑色),50%表示50%亮(既不暗也不亮)100%表示完全亮(白色)。 实例 hsl(0, 100%, 0%) hsl(0, 100%, 25%) hsl(0, 100%, 50%) hsl(0, 100%, 75%) hsl(0, 100%, 90%) hsl(0, 100%, 100%) 亲自试一试 » 灰色阴影灰度通常通过将色调和饱和度设置为0来定义,并将亮度从0%调整到100%以获得较深/较浅的阴影: 实例 hsl(0, 0%, 20%) hsl(0, 0%, 30%) hsl(0, 0%, 40%) hsl(0, 0%, 60%) hsl(0, 0%, 70%) hsl(0, 0%, 90%) 亲自试一试 » HSLA 颜色值HSLA 是 HSL 颜色值的扩展,带有 Alpha 通道-指定颜色的不透明度。 HSLA 颜色值指定为: hsla(hue, saturation, lightness, alpha) alpha 参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字: 混合以下HSLA值进行试验:
HUE 0SATURATION 100%LIGHTNESS 50%ALPHA 0.5 实例 hsla(9, 100%, 64%, 0) hsla(9, 100%, 64%, 0.2) hsla(9, 100%, 64%, 0.4) hsla(9, 100%, 64%, 0.6) hsla(9, 100%, 64%, 0.8) hsla(9, 100%, 64%, 1) 亲自试一试 » ❮ 上一节 下一节 ❯ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |